import React, { Component } from 'react';

import {
  StyleSheet, View, TouchableWithoutFeedback, Dimensions, Image, Text,
} from 'react-native';

// import { ListImageInfo } from '../../../components';
import Theme from '../../../native-base-theme/variables/commonColor';

const { height: _height } = Dimensions.get('window');

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 0,
    };
  }

  render() {
    const { item } = this.props;

    let source = { uri: item.failurePic };
    if (this.state.type === 1) {
      source = require('../../../../assets/images/no-pic.png');
    }
    let dotColor = '#e13821';
    if (item.equipmentLevel === 'A') {
      dotColor = '#e13821';
    } else if (item.equipmentLevel === 'B') {
      dotColor = '#29e121';
    } else {
      dotColor = '#707070';
    }

    return (
      <View style={styles.rootContainer}>
        <TouchableWithoutFeedback
          style={styles.touchableContainer}
          onPress={() => this.props.onItemClick(item)}
        >
          <View style={styles.image}>
            {/* <ListImageInfo dotColor="red" title="天车" text="使用单位：铸造厂" /> */}
            <View style={styles.info_container}>
              <View>
                <Text style={styles.info_text}>
                  备件：{item.materialName}
                </Text>
              </View>
              <View>
                <Text style={styles.info_text}>
                  设备：{item.equipmentName}
                </Text>
              </View>
              <View>
                <Text style={styles.info_text}>
                  故障单：{item.failureCode}
                </Text>
              </View>
            </View>
            <Image
              onPress={() => this.props.onItemClick(item)}
              style={styles.image}
              resizeMode="contain"
              source={source}
              fadeDuration={0}
              onError={() => {
                this.setState({
                  type: 1,
                });
              }
              }
            />
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  rootContainer: {
    height: _height - 20,
    flex: 1,
    backgroundColor: Theme.myPrimary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  touchableContainer: {
    flex: 1,
  },
  image: {
    width: '100%',
    height: '100%',
  },
  badge: {
    height: 20,
    width: 20,
    borderRadius: 10,
    backgroundColor: 'red',
    marginRight: 10,
  },
  info_container: {
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    padding: 8,
    borderRadius: 8,
    position: 'absolute',
    bottom: 58,
    left: 8,
    zIndex: 1,
  },
  info_titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  info_title: {
    fontSize: 17,
    fontWeight: 'bold',
    color: 'white',
    maxWidth: 250,
  },
  info_text: {
    fontSize: 16,
    color: 'white',
    maxWidth: 250,
  },
  level: {
    marginRight: 8,
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 15,
    width: 20,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  info_badge: {
    marginRight: 10,
    borderStyle: 'solid',
    borderColor: '#ffffff',
    borderWidth: 2,
    width: 20,
    height: 20,
    borderRadius: 10,
  },
});

export default Item;
